<template>
  <div class="list-table">
    <div class="text item" style="height: 300px;">
      <barLineChart v-if="optionData.datas.length > 0" height="100%" :chart-data="optionData" />
      <div v-else class="noneData">
        <div>
          <svg-icon icon-class="none" class-name="none-icon" />
          <p>{{ $t('暂无数据') }}</p>
        </div>
      </div>
    </div>
    <div class="area-header">
      <span class="area-header-title">{{ $t('现金流统计表') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('日期')" prop="rollupDate">
        <el-date-picker
          v-model="dateRange"
          style="width: 400px"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item :label="$t('资金结余(元)')" prop="leaseBalanceFunds">
        <Money v-model="queryParams.leaseBalanceFunds" :placeholder="$t('资金结余(元)')" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['report:leaseCashFlow:export']"
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="exportHandle"
        >{{ $t('导出') }}</el-button>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      show-summary
      :summary-method="getCount"
      :data="dealBaseList"
      border
      tooltip-effect="darkTable"
    >
      <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('日期')" align="center" prop="rollupDate" :show-overflow-tooltip="true" min-width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.rollupDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('租赁项目')" min-width="260">
        <el-table-column :label="$t('项目名称')" align="center" prop="dealLeaseName" min-width="260">
          <template slot-scope="scope">
            <div class="plans">
              <div v-for="(value,index) in scope.row.financialLeaseCashFlowVoList" :key="index">
                <router-link
                  target="_blank"
                  :to="{path:'/deal/home/dealBaseHome',query:{id:value.dealLeaseId,companyId:value.companyLeaseId}}"
                  class="link_a"
                >{{ value.dealLeaseName }}</router-link>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('固定租金(元)')" align="center" prop="deadRent" min-width="180" :show-overflow-tooltip="false">
          <template slot-scope="scope">
            <div class="plans">
              <div v-for="(value,index) in scope.row.financialLeaseCashFlowVoList" :key="index">
                <span>{{ moneyFormat(value.deadRent) }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('浮动资金(元)')" align="center" prop="floatingRent" min-width="180" :show-overflow-tooltip="false">
          <template slot-scope="scope">
            <div class="plans">
              <div v-for="(value,index) in scope.row.financialLeaseCashFlowVoList" :key="index">
                <span>{{ moneyFormat(value.floatingRent) }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('咨询费(元)')" align="center" prop="serviceCharge" min-width="180" :show-overflow-tooltip="false">
          <template slot-scope="scope">
            <div class="plans">
              <div v-for="(value,index) in scope.row.financialLeaseCashFlowVoList" :key="index">
                <span>{{ moneyFormat(value.serviceCharge) }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('项目回款金额(元)')" align="center" prop="totalAmountReceivable" min-width="180" :show-overflow-tooltip="false">
          <template slot-scope="scope">
            <div class="plans">
              <div v-for="(value,index) in scope.row.financialLeaseCashFlowVoList" :key="index">
                <span>{{ moneyFormat(value.totalAmountReceivable) }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" :label="$t('融资项目')" min-width="260">
        <el-table-column :label="$t('项目名称')" align="center" prop="dealFinancingName" min-width="260">
          <template slot-scope="scope">
            <div class="plans">
              <div v-for="(value,index) in scope.row.financialLeaseCashFlowVoList" :key="index">
                <router-link
                  target="_blank"
                  :to="{path:'/deal/financing/base/dealBaseFinancingHome',query:{id:value.dealFinancingId}}"
                  class="link_a"
                >{{ value.dealFinancingName }}</router-link>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('应付本金(元)')" align="center" prop="principalPayable" min-width="180" :show-overflow-tooltip="false">
          <template slot-scope="scope">
            <div class="plans">
              <div v-for="(value,index) in scope.row.financialLeaseCashFlowVoList" :key="index">
                <span>{{ moneyFormat(value.principalPayable) }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('应付利息(元)')" align="center" prop="interestPayable" min-width="180" :show-overflow-tooltip="false">
          <template slot-scope="scope">
            <div class="plans">
              <div v-for="(value,index) in scope.row.financialLeaseCashFlowVoList" :key="index">
                <span>{{ moneyFormat(value.interestPayable) }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('应付费用(元)')" align="center" prop="serviceChargesPayable" min-width="180" :show-overflow-tooltip="false">
          <template slot-scope="scope">
            <div class="plans">
              <div v-for="(value,index) in scope.row.financialLeaseCashFlowVoList" :key="index">
                <span>{{ moneyFormat(value.serviceChargesPayable) }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('应付总额(元)')" align="center" prop="totalAmountPayable" min-width="180" :show-overflow-tooltip="false">
          <template slot-scope="scope">
            <div class="plans">
              <div v-for="(value,index) in scope.row.financialLeaseCashFlowVoList" :key="index">
                <span>{{ moneyFormat(value.totalAmountPayable) }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('资金结余(元)')" align="center" prop="leaseBalanceFunds" min-width="180" :show-overflow-tooltip="false">
        <template slot-scope="scope">
          <span :style="{ color: scope.row.leaseBalanceFunds < 0 ? '#E6282B' : '' }">{{ moneyFormat(scope.row.leaseBalanceFunds) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import { financialLeaseCashFlowList } from '@/api/deal/leasingProject/dealLeaseRentPlan'
  import barLineChart from '@/views/chart/barLineChart.vue'
  import { cashFlowCharts } from '@/api/deal/leasingProject/dealLeaseRentPlan'
  export default {
    components: {
      barLineChart
    },
    data() {
      return {
        dateRange: [this.parseTime(new Date()), this.getDate()],
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 租赁项目表格数据
        dealBaseList: {
          financialLeaseCashFlowVoList: []
        },
        // 是否显示弹出层
        formOpen: false,
        // 查询参数
        queryParams: {
          leaseBalanceFunds: undefined,
          beginTime: undefined,
          endTime: undefined,
          pageNum: 1,
          pageSize: 10
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        optionData: {
          datas: []
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      /** 查询租赁项目-租金计划列表 */
      getList() {
        this.loading = true
        if (this.dateRange != null && this.dateRange.length > 1) {
          this.queryParams.beginTime = this.parseTime(this.dateRange[0])
          this.queryParams.endTime = this.parseTime(this.dateRange[1])
        } else {
          this.dateRange = []
          this.queryParams.beginTime = undefined
          this.queryParams.endTime = undefined
        }
        financialLeaseCashFlowList(this.queryParams).then(response => {
          this.dealBaseList = response.rows
          this.total = response.total
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
        const params = {
          leaseBalanceFunds: this.queryParams.leaseBalanceFunds
        }
        cashFlowCharts(params).then(response => {
          this.optionData = {
            legend: true,
            datas: [],
            yAxis2: false,
            yAxisName2: ' ',
            valueFormatter: true,
            legendLeft: 'center',
            xLabel: []
          }
          if (response.data != null) {
            this.optionData.xLabel = response.data.dateList
            this.optionData.datas = [
              {
                name: this.$t('正现金流'),
                type: 'bar',
                stack: '1',
                data: response.data.positiveCashFlowList
              },
              {
                name: this.$t('负现金流'),
                type: 'bar',
                stack: '1',
                data: response.data.negativeCashFlowList
              },
              {
                name: this.$t('现金流结余'),
                type: 'line',
                stack: '1',
                yAxisIndex: 0,
                data: response.data.cashFlowBalanceList
              }
            ]
          }
        })
      },
      // 获取30天后的日期
      getDate() {
        const date1 = new Date()
        const date2 = new Date(date1)
        date2.setDate(date1.getDate() + 30)
        return `${date2.getFullYear()}-${date2.getMonth() + 1 < 10 ? `0${date2.getMonth() + 1}` : date2.getMonth() + 1}-${date2.getDate()}`
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          dealName: undefined,
          delFlag: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      queryHandle() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [this.parseTime(new Date()), this.getDate()]
        this.queryParams.beginTime = undefined
        this.queryParams.endTime = undefined
        this.resetForm('queryForm')
        this.queryHandle()
      },
      // 计算合计数据
      getCount(param) {
        // 租赁合计
        var deadRent = 0
        var floatingRent = 0
        var serviceCharge = 0
        var totalAmountReceivable = 0
        // 融资合计
        var principalPayable = 0
        var interestPayable = 0
        var serviceChargesPayable = 0
        var totalAmountPayable = 0
        this.dealBaseList.forEach((item) => {
          item.financialLeaseCashFlowVoList.forEach((items) => {
            if (items.deadRent) {
              deadRent += Number(items.deadRent)
            }
            if (items.floatingRent) {
              floatingRent += Number(items.floatingRent)
            }
            if (items.serviceCharge) {
              serviceCharge += Number(items.serviceCharge)
            }
            if (items.totalAmountReceivable) {
              totalAmountReceivable += Number(items.totalAmountReceivable)
            }
            if (items.principalPayable) {
              principalPayable += Number(items.principalPayable)
            }
            if (items.interestPayable) {
              interestPayable += Number(items.interestPayable)
            }
            if (items.serviceChargesPayable) {
              serviceChargesPayable += Number(items.serviceChargesPayable)
            }
            if (items.totalAmountPayable) {
              totalAmountPayable += Number(items.totalAmountPayable)
            }
          })
        })
        const { columns } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 1) {
            sums[index] = '合计'
            return
          }
          if (index === 3) {
            sums[index] = this.moneyFormat(deadRent)
          }
          if (index === 4) {
            sums[index] = this.moneyFormat(floatingRent)
          }
          if (index === 5) {
            sums[index] = this.moneyFormat(serviceCharge)
          }
          if (index === 6) {
            sums[index] = this.moneyFormat(totalAmountReceivable)
          }

          if (index === 8) {
            sums[index] = this.moneyFormat(principalPayable)
          }
          if (index === 9) {
            sums[index] = this.moneyFormat(interestPayable)
          }
          if (index === 10) {
            sums[index] = this.moneyFormat(serviceChargesPayable)
          }
          if (index === 11) {
            sums[index] = this.moneyFormat(totalAmountPayable)
          }
        })
        return sums
      },
      /** 导出按钮操作 */
      exportHandle() {
        this.downLoadExcel('/rent/dealLeaseRent/exportCashFlow', this.queryParams)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .plans{
    div{
      overflow: hidden;
      text-overflow: ellipsis;
      height: 36px;
      line-height: 36px;
      border-bottom: 1px solid #dfe6ec!important;
      padding: 0 10px;
      margin-left : -9px;
      margin-right : -9px;
      &:last-child{
        border-bottom: 0!important;
      }
    }
  }
</style>
